<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #content{
            background-color: bisque;
            width: 350px;
            height: 350px;
            display: flex;
            /*flex-direction: column-reverse;*/
            flex-wrap: wrap;
            justify-content: space-around;
        }
        #content>div{
            width: 100px;
            height: 100px;
        }
        #item1{
            background-color: #8bc34a;
        }
        #item2{
            background-color: darkcyan;
        }
        #item3{
            background-color: aqua;
        }
        #item4{
            background-color: blueviolet;
        }
        #item5{
            background-color: darkblue;
        }
    </style>
</head>
<body>

<div id="content">
    <div id="item1">item1</div>
    <div id="item2">item2</div>
    <div id="item3">item3</div>
    <div id="item4">item4</div>
    <div id="item5">item5</div>
</div>

<!--
display
为flex是设置的父元素，而inline、block等是设置的自己，它就是一个弹性盒子，父元素叫做容器，里面的子元素叫做项目
特性：
当父元素的宽高不足时会自动压缩，有充足的空间时不会自动扩充。
flex-direction是设置项目的排列方式，row、column,row-reverse,column-reverse,分别代表从左到右、从上到下、从右到左、从下到上，默认是row。
flex-wrap:设置项目能不能换行，取值有wrap、nowarp，分别代表换行、不换行，默认nowarp
justify-content:取值有：
    space-between：将剩余空隙均分给每个项目
    flex-end:元素会移动到右边
    space-around:作用相当于给每个项目设置了左右外边距去均分父元素的剩余空间
    flex-start:排列是从左到右，是默认值
    基于flex-direction:row，如果是column，那么justify-content的结论就会相反，就是从横向变成纵向。


-->
</body>
</html>